<template>
  <div class="setting-container">
    <!-- 用户信息头部 -->
    <div class="user-header">
      <div class="avatar-container">
        <img class="user-avatar" :src="userInfo.avatar" alt="用户头像" />
        <div class="avatar-badge">
          <van-icon name="edit" size="12" color="#fff" />
        </div>
      </div>
      <div class="user-info">
        <h3 class="user-name">{{ userInfo.name }}</h3>
        <p class="user-date">注册于 {{ userInfo.createdAt }}</p>
      </div>
      <van-icon name="arrow" class="arrow-icon" @click="$router.push({ name: 'NotFound' })" />
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stat-item">
        <div class="stat-number">空空如也</div>
        <div class="stat-label">文章</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">空空如也</div>
        <div class="stat-label">点赞</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">空空如也</div>
        <div class="stat-label">收藏</div>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="menu-section">
      <van-cell-group>
        <van-cell title="我的资料" icon="user-o" is-link class="menu-item" />
        <van-cell title="历史记录" icon="clock-o" is-link class="menu-item" />
        <van-cell title="我的收藏" icon="star-o" is-link class="menu-item" />
        <van-cell title="我的点赞" icon="like-o" is-link class="menu-item" />
        <van-cell title="推荐分享" icon="share-o" is-link class="menu-item" />
        <van-cell title="意见反馈" icon="comment-o" is-link class="menu-item" />
        <van-cell title="关于我们" icon="info-o" is-link class="menu-item" />
        <van-cell
          title="退出登录"
          icon="close"
          is-link
          class="menu-item clock-item"
          @click="showLogoutConfirm"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getUserInfo, logout } from '@/api/user'
import { Dialog, Toast } from 'vant'

export default {
  name: 'MySetting',
  data () {
    return {
      userInfo: {}
    }
  },
  async created () {
    const res = await getUserInfo()
    console.log(res)
    this.userInfo = res.data
  },
  methods: {
    showLogoutConfirm () {
      Dialog.confirm({
        title: '确认退出',
        message: '确定要退出登录吗？',
        confirmButtonText: '确定退出',
        cancelButtonText: '取消',
        confirmButtonColor: '#ff4757',
        cancelButtonColor: '#8b6f47'
      })
        .then(async () => {
          try {
            await logout()
            Toast.success('已退出登录')
            this.$router.push({ name: 'Login' })
          } catch (error) {
            Toast.fail('退出失败，请重试')
          }
        })
        .catch(() => {
          // 用户点击取消，不做任何操作
        })
    }
  }
}
</script>

<style scoped>
.setting-container {
  min-height: 100vh;
  background: #faf8f5;
  padding-bottom: 20px;
}

/* 用户信息头部样式 - 温暖自然色调 */
.user-header {
  background: linear-gradient(135deg, #a59e94 0%, #a0845c 100%);
  padding: 40px 20px;
  display: flex;
  align-items: center;
  position: relative;
  color: #2c1810;
}

.avatar-container {
  position: relative;
  margin-right: 20px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.2);
}

.avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: #d4a574;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 5px 0;
  color: #2c1810;
  letter-spacing: 0.5px;
}

.user-date {
  font-size: 14px;
  color: #5d4e37;
  margin: 0;
  opacity: 0.8;
}

.arrow-icon {
  font-size: 20px;
  color: #5d4e37;
  opacity: 0.6;
}

/* 统计信息样式 - 米色调 */
.stats-section {
  display: flex;
  justify-content: space-around;
  background: #fdfcf9;
  margin: -20px 20px 20px;
  border-radius: 12px;
  padding: 25px 20px;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.08);
  border: 1px solid rgba(139, 111, 71, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 22px;
  font-weight: 500;
  color: #8b6f47;
  margin-bottom: 4px;
  font-family: system-ui, -apple-system, sans-serif;
}

.stat-label {
  font-size: 13px;
  color: #8b7355;
  opacity: 0.8;
}

/* 功能列表样式 - 温暖米色调 */
.menu-section {
  margin: 0 15px;
}

.menu-item {
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #fdfcf9;
  border: 1px solid rgba(139, 111, 71, 0.08);
  transition: all 0.2s ease;
}

.menu-item:active {
  transform: scale(0.98);
}

.menu-item :deep(.van-cell) {
  padding: 16px 20px;
  background: transparent;
}

.menu-item :deep(.van-cell__title) {
  font-size: 16px;
  color: #2c1810;
  font-weight: 400;
}

.menu-item :deep(.van-icon) {
  color: #8b6f47;
  font-size: 18px;
  margin-right: 12px;
  opacity: 0.8;
}

.clock-item :deep(.van-cell__title) {
  color: #a0522d;
}

.clock-item :deep(.van-icon) {
  color: #a0522d;
}

/* 响应式设计 - 保持温暖色调 */
@media screen and (max-width: 375px) {
  .user-header {
    padding: 30px 15px;
  }

  .user-avatar {
    width: 70px;
    height: 70px;
  }

  .user-name {
    font-size: 20px;
  }

  .stats-section {
    margin: -15px 15px 15px;
    padding: 20px 15px;
  }

  .stat-number {
    font-size: 20px;
  }
}
</style>
